<script setup>
import { reactive, ref } from 'vue'
import {useUserStore} from "@/stores/counter"
import {addUser} from "@/api/user";


import { usePowerOps, useTeamOps } from '@/hooks';
const powerOptions = usePowerOps();
const teamOptions = useTeamOps();


const userStore = useUserStore();

const formSize = ref('default')

const ruleFormRef = ref(null);

const ruleForm = reactive({
  uName: "",
  tel: "",
  tId: "",
  power: ""
})

const rules = reactive({})

const submitForm = async (formEl) => {
  // 发起添加用户信息请求
  ruleForm.token = userStore.userMsg.token;
  addUser(ruleForm).then(res=>{
    ElMessage({
      message:res.data.msg,
      type: "info",
      onClose(){
        formEl.resetFields()
      }
    })
    // 如果添加的是经理，还需要发起修改部门信息请求
    // 修改部门leader
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
  ElMessage({
    showClose: true,
    message: "表单清空成功",
    type:"info"
  })
}

</script>


<template>
  <div class="meetingRoom">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="姓名" prop="uName">
        <el-input v-model="ruleForm.uName" />
      </el-form-item>
      <el-form-item label="手机号" prop="tel">
        <el-input v-model="ruleForm.tel" />
      </el-form-item>
      <el-form-item label="部门" prop="tId">
        <el-select-v2
          v-model="ruleForm.tId"
          :options="teamOptions"
        />
      </el-form-item>
      <el-form-item label="职位" prop="power">
        <el-select-v2
          v-model="ruleForm.power"
          :options="powerOptions"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          添加
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
      </el-form-item>
    </el-form>
    <p>{{ ruleForm }}</p>
  </div>
</template>

<style>
</style>
